<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title><meta name="description" content="本页所有尺寸都使用rem布局，也是移动端开发app常用尺寸" />
		<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			body{
				
			}
			.container{
				width: 100%;
				margin: 0 auto;
				max-width: 9rem;
				min-width: 320px;
				position: relative;
			}
			.nav_area{
				width: 100%;
				height:1.2rem ;
				background: url(img/nav.png);
				background-repeat: no-repeat;
				background-size: 100% 100%;
				background-position: center;
				position: fixed;
				z-index: 999;
				display: flex;
				align-items: center;
				left: 0px;
				top: 0px;
				margin: 0 auto;
			}
			.nav_area>a>img {
				margin-left: 0.5rem;
				width: 0.4rem;
				height: 0.58rem;
			}
			.nav_area>p{
				text-align: center;
				width: 100%;
				height: 100%;
				font-size: 0.45rem;
				line-height: 1.2rem;
				color: white;
			}
			.tu{
				width: 6rem;
				height:2.22rem ;
				margin:0 auto ;
				margin-top: 2rem;
				display: flex;
				justify-content: center;
				
			}
			.tu>img{
				width: auto;
				height: 2.22rem;
			}
			.zi{
				width: 9rem;
				height: 1rem;
				display: flex;
				justify-content: center;
				margin-top: 0.5rem;
			}
			.zi>p{
				color: #F23A38;
				font-size: 0.4rem;
			}
			.zi1{
				width: 9rem;
				height: 1rem;
				display: flex;
				justify-content: center;
				margin-top: -0.4rem;
			}
			.zi1>p{
			}
			.zi2{
				width: 9rem;
				height:1.6rem ;
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap;
			}
			.zi2>p>span{
				color: #F23A38;
			}
			.zi3{
				width: 9rem;
				height:1.6rem ;
				margin: 0 auto;
				display: flex;
				flex-wrap: wrap;
			}
			.zi3>p>span{
				color: #F23A38;
			}
			table{
				width: 9rem;
				height: 3.12rem;
				text-align: center;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="nav_area">
				<a href="#" class="aaa"><img src="img/fanhui@2x.png"/></a>
				<p>特权说明</p>
			</div>
			<div class="tu">
				<img src="img/zanbeijing@2x.png"/>
			</div>
			<div class="zi">
				<p>好评特权</p>
			</div>
			<div class="zi1">
				<p>(已激活)</p>
			</div>
			<div class="zi2">
				<p><span>特权介绍：</span>用户5星好评每达到100即可获得积分奖励，等级越高，奖励越高。</p>
			</div>
			<div class="zi3">
				<p><span>特权对象：</span>lv1用户以上</p>
			</div>
				<table cellpadding="0" cellspacing="0"border="1">
				<tr>
					<td>等级</td>
					<td>奖励积分</td>
					<td>等级</td>
					<td>奖励积分</td>
				</tr>
				<tr>
					<td>0</td>
					<td>21</td>
					<td>20</td>
					<td>26</td>
				</tr>
				<tr>
					<td>10</td>
					<td>52</td>
					<td>10</td>
					<td>22</td>
				</tr>
				<tr>
					<td>15</td>
					<td>15</td>
					<td>116</td>
					<td>13</td>
				</tr>
				<tr>
					<td>21</td>
					<td>25</td>
					<td>252</td>
					<td>58</td>
				</tr>
			</table>
		</div>
	</body>
	<script src="js/flexible.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			$(".aaa img").click(function(){
			   location.href="服务承诺设置.html"
			    
			})
		})
	</script>
</html>
